<template>
	<div>
		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px;">
			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">
				<i class="el-icon-search"></i>
			</div>
			<font color="#72767B" style="margin-left: 20px;">筛选查询</font>
			<div style="float: right; width: auto;">
				<font color="#72767B" style="margin-left: 20px;">模糊条件</font>
				<div style="float: right; margin-right: 30px;">
					<el-button type="primary" @click="newinsert">查询</el-button>
				</div>
				<div style="float: right; width: auto;margin-right: 20px; margin-left: 20px;">
					<el-input v-model="findStore.userPhone" placeholder="请输入商品大类名称进行查询"></el-input>
				</div>
			</div>
			<div style="float: right; width: auto; margin-right: 20px;">
				<font color="#72767B" style="margin-right: 20px;">状态</font>
				<el-select clearable size='mini' v-model="state" placeholder="状态查询" autocomplete="off">
				  <el-option v-for="(item,index) in stateList" :label="item" :value ="index"></el-option>
				</el-select>
			</div>
		</div>
		
		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px; margin-top: 20px;">
			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">
				<i class="el-icon-s-grid"></i>
			</div>
			<font color="#72767B" style="margin-left: 20px;">数据列表</font>
			
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" @click="dialogTableVisible = true">删除</el-button>
			</div>
			<el-dialog title="删除门店" :visible.sync="dialogTableVisible">
			  <el-table :data="gridData">
			    <el-table-column property="date" label="仓库名称" width="100"></el-table-column>
			    <el-table-column property="name" label="联系人" width="100"></el-table-column>
			    <el-table-column property="address" label="管理门店"></el-table-column>
				<el-table-column property="id" label="删除键" >
					<template slot-scope="scope">
						<el-button type="danger"  @click="Delect(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			  </el-table>
			</el-dialog>
			
			
			<!-- <div style="float: right; margin-right: 30px;">
				<el-button type="info">修改</el-button>
			</div> -->
			
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" @click="dialog = true">修改</el-button>
			</div>
			
			<el-dialog title="修改仓库1" :visible.sync="dialog">
			  <el-table :data="gridData">
			    <el-table-column property="date" label="仓库名称" width="100"></el-table-column>
			    <el-table-column property="name" label="联系人" width="100"></el-table-column>
			    <el-table-column property="address" label="管理仓库"></el-table-column>
				<el-table-column property="id" label="修改键" >
					<template slot-scope="scope">
						<el-button type="danger"  @click="Update1(scope.row.id)">修改</el-button>
					</template>
				</el-table-column>
				
			  </el-table>
			</el-dialog>
			
			<el-dialog title="修改仓库2" :visible.sync="dialogTable">
			  
				<el-form :model="form">
				  <el-form-item label="仓库名称" :label-width="formLabelWidth">
				    <el-input v-model="form.warehouseName" autocomplete="off"></el-input>
				  </el-form-item>
								
					<el-form-item label="联系人" :label-width="formLabelWidth">
						<el-input v-model="form.userName" autocomplete="off"></el-input>
					</el-form-item>
								
					<el-form-item label="联系人电话" :label-width="formLabelWidth">
						<el-input v-model="form.userPhone" autocomplete="off"></el-input>
					</el-form-item>
								
					<el-form-item label="地址" :label-width="formLabelWidth">
						<el-input v-model="form.warehouseAddress" autocomplete="off"></el-input>
					</el-form-item>
								
					<template>
						<el-radio v-model="radio" label="0">启用</el-radio>
						<el-radio v-model="radio" label="1">停用</el-radio>
					</template>
				</el-form>
			  
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogTable = false">取 消</el-button>
			    <el-button type="primary" @click="Update2()">确 定</el-button>
			  </div>
			</el-dialog>
			
			<!-- <div style="float: right; margin-right: 30px;">
				<el-button type="info">新增</el-button>
			</div> -->
			<div style="float: right; margin-right: 30px;">
				<!-- <el-button type="info">新增</el-button> -->
				<el-button type="info" @click="dialogFormVisible = true">新增</el-button>
			</div>
			<!-- Form -->
			<el-dialog title="增加仓库" :visible.sync="dialogFormVisible">
			  <el-form :model="form">
			    <el-form-item label="仓库名称" :label-width="formLabelWidth">
			      <el-input v-model="form.warehouseName" autocomplete="off"></el-input>
			    </el-form-item>
				
				<el-form-item label="联系人" :label-width="formLabelWidth">
				  <el-input v-model="form.userName" autocomplete="off"></el-input>
				</el-form-item>
				
				<el-form-item label="联系人电话" :label-width="formLabelWidth">
				  <el-input v-model="form.userPhone" autocomplete="off"></el-input>
				</el-form-item>
				
				<el-form-item label="地址" :label-width="formLabelWidth">
				  <el-input v-model="form.warehouseAddress" autocomplete="off"></el-input>
				</el-form-item>
				
				<template>
				  <el-radio v-model="radio" label="0">启用</el-radio>
				  <el-radio v-model="radio" label="1">停用</el-radio>
				</template>
				
				<!-- <template>
				  <el-transfer v-model="value" :data="data"></el-transfer>
				</template> -->
			    
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="insert">确 定</el-button>
			  </div>
			</el-dialog>
			
			<!-- <div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);margin-top: 4px;">
				<el-table height="600px" :data="tableData" border style="width: 100%">
					<el-table-column align="center" type="selection" width="55"></el-table-column>
					<el-table-column align="center" prop="date" label="日期" width="180"></el-table-column>
				  </el-table>
			</div> -->
			<template>
			    <el-table :data="tableData,y" style="width: 100%">
			      <el-table-column prop="warehouseNumber" label="仓库编号" > </el-table-column>
			      <el-table-column prop="warehouseName" label="仓库名称" > </el-table-column>
				  <el-table-column prop="userName" label="联系人" > </el-table-column>
				  <el-table-column prop="userPhone" label="手机号" > </el-table-column>
				  <el-table-column prop="warehouseAddress" label="地址" > </el-table-column>
				  <el-table-column prop="storeName" label="关联门店" > </el-table-column>
				  <el-table-column prop="warehouseState" :formatter="getstuta" label="状态" > </el-table-column>
			    </el-table>
				
			  </template>
			<div style="text-align: center;">
				<el-pagination :page-count="pageCount" @current-change="changePage" 
				:current-page="categoryPage.indexPage"  background layout="prev, pager, next"
				:total="total" :page-size="categoryPage.size">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Category',
		data() {
			return {
				input: null,
				categoryPage: {
					indexPage: 1,
					size: 3
				},
				findStore: {
					warehouseState: null,
					userPhone: null
				},
				total: 0,
				pageCount: 10,
				
				//弹出框
				gridData: [],
				radio: "0",
				dialogTableVisible: false,
				//新增的
				dialogFormVisible: false,
				//修改一
				dialog: false,
				//修改二
				dialogTable: false,
				
				form: {
					// storeId: null,
				    warehouseName: '',
				    userName: '',
				    userPhone: '',
				    warehouseAddress: '',
				    warehouseState: 0
				},
				
				tableData: []
			}
		},
		methods: {
			open1() {
			    this.$notify({
					title: '成功',
					message: '删除成功',
					type: 'success'
				});
			},
			open2() {
				this.$notify.error({
			        title: '错误',
			        message: '删除错误'
			    });
			},
			open3() {
			    this.$notify({
					title: '成功',
					message: '添加成功',
					type: 'success'
				});
			},
			open4() {
				this.$notify.error({
			        title: '错误',
			        message: '添加错误'
			    });
			},
			open5() {
			    this.$notify({
					title: '成功',
					message: '修改成功',
					type: 'success'
				});
			},
			open6() {
				this.$notify.error({
			        title: '错误',
			        message: '修改错误'
			    });
			},
			open10() {
				this.$notify.error({
			        title: '错误',
			        message: '不可进行次操作'
			    });
			},
			newinsert(){
				this.loadDate()
			},
			Update1(id){
				// this.getstro.storeId = id
				this.form.warehouseId = id,
				console.log(this.form.storeId),
				this.dialogTable = true
			},
			Update2(){
				console.log(this.form)
				this.$http.post("warehouse/warehouseupdate",this.form)
				.then((resp)=>{
					if(resp.data.code==200){
						this.open5()
					}else{
						this.open6()
					}
					this.dialogTable = false
					this.dialog = false
					this.loadDate();
				})
			},
			insert(){
				this.$http.post("/warehouse/warehouseAdd",this.form)
				.then((resp)=>{
					if(resp.data.code==200){
						this.open3()
					}else{
						this.open4()
					}
					this.loadDate();
					this.dialogFormVisible=false
				})
			},
			changePage(pe){
				console.log(pe)
				this.categoryPage.indexPage = pe;
				this.loadDate();
			},
			Delect(id){
				console.log(id)
				this.$http.post("/warehouse/warehouseDelect",{
					warehouseId: id
				})
				.then((resp)=>{
					console.log(resp)
					this.open10()
				})
			},
			//查询所有
			loadDate() {
				this.$http.post("/warehouse/warehouseAll",{
					warehouseParam1: this.categoryPage,
					warehouseListParam: this.findStore
				}).then((resp)=> {
					// console.log(resp)
					if(resp.data.code==200){
						this.gridData = []
						this.tableData = resp.data.data.warehouseDto1s
						this.total = resp.data.data.totals
						this.categoryPage.indexPage = resp.data.data.pageSize
						for(var i = 0;i<this.tableData.length;i++){
						// 	console.log("============="+this.tableData[i].warehouseId)
						// 	this.x.push(this.tableData[i].warehouseId);
							this.gridData.push({
								id: this.tableData[i].warehouseId,
								date: this.tableData[i].warehouseName,
								name: this.tableData[i].userName,
							})
						}
						// console.log("===============")
						// console.log(this.x)
						this.getwarehouseName()
					}
				}).catch(function(error){
					console.log(error)
				})
			},
			
			//初始化管理门店
			getwarehouseName(){
				this.tableData.forEach(item =>{
					this.$set(item,'storeName','暂无')
				})
			},
			getstuta(row){
				if(row.warehouseState==0){
					return '启用'
				}else{
					return '停用'
				}
			}
		},
		created() {
			this.loadDate();
		}
	}
</script>

<style>
</style>
